<template>
  <div class="app-container">
    <!-- 条件栏 -->
    <div class="filter-wrapper">
      <NewPageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
        :filter-btn="filterInfo.btn"
      >
        <template v-slot:filter-operateTime>
          <el-date-picker
            v-model="operateTime"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="至"
            :picker-options="$fn.pickerOptionsFn()"
            align="right"
            start-placeholder="操作时间开始日期"
            end-placeholder="操作时间结束日期"
            :shortcuts="$fn.pickerOptionsFn()"
            :default-time="[
              new Date(2000, 1, 1, 0, 0, 0),
              new Date(2000, 1, 1, 23, 59, 59),
            ]"
            @change="timeChange"
          ></el-date-picker>
        </template>
        <template v-slot:filter-fiscalPeriodName>
          <el-input
            v-model="filterInfo.query.fiscalPeriodName"
            class="not-mongolia"
            type="input"
            :required="true"
            :disabled="true"
            :placeholder="'请选择会计期间'"
          >
            <template #append>
              <el-icon @click="checkFinance"><MoreFilled /></el-icon>
            </template>
          </el-input>
        </template>
      </NewPageFilter>
    </div>
    <div class="filter-wrapper">
      <NewPageFilter :filter-btn="filterInfo.btnList"></NewPageFilter>
    </div>
    <!-- 表格 -->
    <TableContainer
      v-model:data="tableInfo.data"
      :tab-index="false"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      :pager="false"
      :checkBox="false"
      :spanMethod="spanMethod"
    />
    <SelectFiscalPeriod
      v-if="selectFiscalInfo.visible"
      v-model:show-dialog="selectFiscalInfo.visible"
      :query="selectFiscalInfo.query"
      :save-empty="true"
      :check-box="false"
      :highlight-row="true"
      @callback="callBackselectFinanceType"
    />
    <PageDialog
      v-show="dialogInfo.visible"
      :title="dialogInfo.title"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <div class="asset-msg">
        <div class="asset-msg-label">
          <i class="el-icon-warning"></i>{{ dialogInfo.msg }}：
        </div>
        <el-radio-group v-model="dialogInfo.flag">
          <el-radio label="page">当前页数据</el-radio>
          <el-radio label="all">全部页数据</el-radio>
        </el-radio-group>
      </div>
    </PageDialog>
  </div>
</template>

<script setup name="classContableRetrieval">
import {
  warehouseOutCategoryQuery,
  warehouseOutCategoryExportExcel,
} from '@/api/dataQuery'
import { getDeptAll, getCategoryLevelInfo, getDeptLevelInfo } from '@/api/core'
const { proxy } = getCurrentInstance()
const operateTime = ref([])

// 过滤相关配置
const filterInfo = ref({
  query: {
    startDate: '',
    endDate: '',
    fiscalPeriodName: '',
    categoryLevel: 1,
    deptLevel: 1,
  },
  copyQuery: {},
  list: [
    {
      slot: true,
      label: '起止日期',
      value: 'operateTime',
    },
    {
      label: '会计期间',
      value: 'fiscalPeriodName',
      slot: true,
    },
    {
      componentType: 'input',
      label: '资产分类',
      value: 'categoryLevel',
      api: getCategoryLevelInfo,
      componentType: 'slip-select',
      keyField: 'levelName',
      valueField: 'levelNum',
      event: search,
      // defaultValue: true,
    },
    {
      componentType: 'input',
      label: '部门分级',
      value: 'deptLevel',
      componentType: 'slip-select',
      api: getDeptLevelInfo,
      keyField: 'levelName',
      valueField: 'levelNum',
      event: search,
      // defaultValue: true,
    },
    {
      label: '使用部门',
      value: 'deptIds',
      componentType: 'slip-select',
      query: {
        deptAuth: 'id',
        status: 1,
      },
      api: getDeptAll,
      multiple: true,
      event: search,
    },
  ],
  btn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
  btnList: [
    {
      type: 'button',
      label: '导出excel',
      event: exportExcel,
      show: proxy.$permission('classContableRetrieval:exportExcel'),
    },
  ],
})
// 表格相关
const tableInfo = ref({
  data: [],
  fieldList: [
    { label: '科室分类', value: 'deptClass' },
    { label: '科室编码', value: 'deptCode' },
    { label: '科室名称', value: 'deptName' },
  ],
  copyFieldList: [],
})
const selectFiscalInfo = ref({
  visible: false,
  query: { fiscalType: 1 },
})
const dialogInfo = ref({
  visible: false,
  title: '提示',
  btLoading: false,
  type: '',
  msg: '',
  width: '400px',
  flag: 'page',
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '导出',
      type: 'primary',
      event: checkConfirm,
      show: true,
    },
  ],
})

onMounted(() => {
  filterInfo.value.copyQuery = proxy.$fn.deepClone(filterInfo.value.query)
  tableInfo.value.copyFieldList = proxy.$fn.deepClone(tableInfo.value.fieldList)
})

function handleClose() {
  dialogInfo.value.visible = false
}
function checkConfirm() {
  exportExcelList()
  dialogInfo.value.visible = false
  dialogInfo.value.msg = ''
}
function exportExcelList() {
  let params = {
    ...filterInfo.value.query,
    isPagerByExport: dialogInfo.value.flag === 'page' ? true : false,
  }
  warehouseOutCategoryExportExcel(params).then((res) => {
    if (res) {
      proxy.$fn.parseExcel(res)
    }
  })
}
function checkFinance() {
  selectFiscalInfo.value.visible = true
}
function callBackselectFinanceType(data) {
  if (data && data.id) {
    filterInfo.value.query.fiscalPeriodName = data.name
  } else {
    filterInfo.value.query.fiscalPeriodName = ''
  }
  search()
}
function spanMethod({ row, column, rowIndex, columnIndex }) {
  let keys = ['deptClass']
  // 注意:字段列表要按表格排列的顺序排列,如果后续字段不再需要进行行合并,可以省略后面的字段,如果中间某字段要跳过合并,要用空字符串顶位
  return proxy.$fn.spanMethod(tableInfo.value.data, keys, rowIndex, columnIndex)
}
// 获取列表
function getList() {
  warehouseOutCategoryQuery(filterInfo.value.query).then((res) => {
    const columnList = res.data?.columnList || []
    const rowTempList = res.data?.warehouseOutCategoryInfoVOList || []
    const rowList = []
    rowTempList.forEach((item) => {
      item.warehouseOutCategoryQueryVOList?.forEach((el) => {
        rowList.push({
          deptClass: el.deptClass,
          deptCode: el.deptCode,
          deptName: el.deptName,
          ...el.columnMap,
        })
      })
    })
    const titleArr = columnList.map((item) => {
      return {
        label: item.name,
        value: item.id + '',
      }
    })
    tableInfo.value.fieldList = tableInfo.value.copyFieldList.concat(titleArr)
    tableInfo.value.data = rowList
  })
}
function clearSearch() {
  filterInfo.value.query = proxy.$fn.deepClone(filterInfo.value.copyQuery)
  operateTime.value = []
}
// 搜索
function search() {
  if (
    !filterInfo.value.query.fiscalPeriodName &&
    !filterInfo.value.query.startDate
  ) {
    proxy.$message({
      message: '请选择会计区间或操作时间',
      type: 'warning',
      duration: 3500,
      showClose: true,
    })
    return
  } else if (
    filterInfo.value.query.fiscalPeriodName &&
    filterInfo.value.query.startDate
  ) {
    proxy.$message({
      message: '会计区间或操作时间只能同时选一个',
      type: 'warning',
      duration: 3500,
      showClose: true,
    })
    return
  }
  getList()
}
function timeChange(val) {
  if (val && val.length) {
    filterInfo.value.query.startDate = val[0]
    filterInfo.value.query.endDate = val[1]
  } else {
    filterInfo.value.query.startDate = ''
    filterInfo.value.query.endDate = ''
  }
  search()
}
function exportExcel() {
  dialogInfo.value.visible = true
  dialogInfo.value.type = 'excel'
  dialogInfo.value.msg = '请选择数据导出范围'
  dialogInfo.value.btList[1].label = '导出'
  dialogInfo.value.flag = 'page'
}
</script>

<style scoped></style>
